<template>
  <div class="Qn-Bg">
    <div class="header">
      <div class="random" @click="RandomSet">
        <i class="el-icon-setting"></i>
        题目随机设置
      </div>
<!--      <div class="hide" @click="HideSet">-->
<!--        <i class="el-icon-remove"></i>-->
<!--        隐藏系统题号-->
<!--      </div>-->
      <div class="hide"  >
        <el-checkbox @click="ShowAllIndex"
                     v-model="ifShowAllIndex"
        >批量添加题号
        </el-checkbox>
      </div>

      <div class="preview">
        <i class="el-icon-view"></i>
        预览
      </div>

      <div class="finishEdit">
        <i class="el-icon-check"></i>
        完成编辑
      </div>
    </div>
    <div class="Qn-Bgbody">
      <div class="left">
        <el-container style="height: 100%; border: 1px solid #eee">
          <el-main width="100%" >
            <el-tabs type="border-card" style="width: 200px; margin-top: -20px">
              <el-tab-pane label="题型选择">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    style="width: 150px; border: none"
                >
                  <el-submenu index="1">
                    <template slot="title">
                      <i class="el-icon-check" style="color: blue"></i>
                      <span>选择题</span>
                    </template>
                    <el-menu-item-group>

                      <el-popover placement="right" width="400" trigger="hover"  ref="singlechoice":close-delay= "0" :open-delay="200">
                        <preview-single-choice></preview-single-choice>
                      </el-popover>
                      <el-menu-item index="1-1"  v-popover:singlechoice @click="addSingleChoice">单选题</el-menu-item>


                      <el-popover placement="right" width="400" trigger="hover"  ref="muticlechoice":close-delay= "0" :open-delay="200" >
                        <PveviewMutipleChoive></PveviewMutipleChoive>

                      </el-popover>
                      <el-menu-item index="1-2"  v-popover:muticlechoice  @click="addMulChoice">多选题</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="2">
                    <template slot="title">
                      <i class="el-icon-edit" style="color: blue"></i>
                      <span>填空题</span>
                    </template>
                    <el-menu-item-group>
                      <el-popover placement="right" width="400" trigger="hover"  ref="fillone":close-delay= "0" :open-delay="200">
                        <preview-fill></preview-fill>

                      </el-popover>
                      <el-menu-item index="2-1" v-popover:fillone @click="addSingleTk">单项填空</el-menu-item>

                      <el-popover placement="right" width="400" trigger="hover"  ref="fillmany"  close-delay = 0 :open-delay="200">
                        <preview-many></preview-many>

                      </el-popover>
                      <el-menu-item index="2-2" v-popover:fillmany>多项填空</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="3">
                    <template slot="title">
                      <i class="el-icon-plus" style="color: blue"></i>
                      <span>评分题</span>
                    </template>
                    <el-menu-item-group>
                      <el-popover placement="right" width="400" trigger="hover"  ref="scale"  close-delay = 0 :open-delay="200">
                        <preview-scale></preview-scale>

                      </el-popover>
                      <el-menu-item index="3-1" v-popover:scale @click="addRate">量表题</el-menu-item>

                      <el-popover placement="right" width="400" trigger="hover"  ref="singlescore"  close-delay = 0 :open-delay="200">
                        <preview-single-score></preview-single-score>

                      </el-popover>
                      <el-menu-item index="3-2"  v-popover:singlescore>评分单选</el-menu-item>

                      <el-popover placement="right" width="400" trigger="hover"  ref="evaluate" close-delay = 0 :open-delay="200">
                        <preview-evaluate></preview-evaluate>

                      </el-popover>
                      <el-menu-item index="3-3" v-popover:evaluate>评价题</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="4">
                    <template slot="title">
                      <i class="el-icon-user" style="color: blue"></i>
                      <span>个人信息</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="4-1">姓名</el-menu-item>
                      <el-menu-item index="4-2">性别</el-menu-item>
                      <el-menu-item index="4-3">年龄</el-menu-item>
                      <el-menu-item index="4-4">手机 </el-menu-item>
                      <el-menu-item index="4-5">行业</el-menu-item>
                      <el-menu-item index="4-6">职业</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                </el-menu>
              </el-tab-pane>
              <el-tab-pane label="问卷大纲">
                <el-table
                    :data="dataList"
                    stripe
                    border
                    style="height:100%;width: 300px; border: none">
                  <el-table-column
                      prop="name"
                      label="题目"
                      width="170"
                      style="border: none">
                    <template slot-scope="scope">
                      <span>{{ scope.$index+1 }}.{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>


                </el-table>

              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </div>
      <div class="right">
        <div class="title">
          <input type="text" v-model="questionNare.title" style="border:none; font-size:40px;text-align:center;" >
        </div>
        <editbody ref="editbodyref" :showId="ifShowAllIndex"></editbody>
      </div>
    </div>
  </div>
</template>

<script>

import PreviewSingleChoice from '../../../components/Preview/PreviewSingleChoice.vue'
import PveviewMutipleChoive from '../../../components/Preview/PreviewMutipleChoive.vue'
import PreviewFill from '../../../components/Preview/PreviewFill.vue'
import PreviewMany from '../../../components/Preview/PreviewMany.vue'
import PreviewScale from '../../../components/Preview/PreviewScale.vue'
import PreviewSingleScore from '../../../components/Preview/PreviewSingleScore.vue'
import PreviewEvaluate from '../../../components/Preview/PreviewEvaluate.vue'
import Editbody from './Edit.vue'

export default {
  data(){
    return{
      ifShowAllIndex:false,
      dataList:
      [
        {
          name:'test'
        },
        {
          name:'test'
        }
      ],
      isCollapse: true,
      questionNare:{
        title:'test',

      }
    }
  },
  components:{
      PreviewSingleChoice,
      PveviewMutipleChoive,
      PreviewFill,
      PreviewMany,
      PreviewScale,
      PreviewSingleScore,
      PreviewEvaluate,
      Editbody
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    RandomSet() {},
    ShowAllIndex(){
      if(this.ifShowAllIndex){
        this.ifShowAllIndex=false;
      }else{
        this.ifShowAllIndex=true;
      }
      // this.$refs.editbodyref.showIdSwitch();
    },
    addSingleChoice(){
      this.$refs.editbodyref.addDan();
    },
    addMulChoice(){
      this.$refs.editbodyref.addMul();
    },
    addSingleTk(){
      this.$refs.editbodyref.addTk();
    },
    addRate(){
      this.$refs.editbodyref.addRate();
    },
  },
};
</script>

<style scoped>
.Qn-Bg {
  min-width: 1400px; /*避免输入框元素错位*/
  height: 100%;
  background: rgb(245, 245, 245);
  margin: 0px;
  padding: 0px;
  display: block;;
}
.header{
  background-color: #fff;
  height: 30px;
  color: black;
  display: flex;
}
.Qn-Bgbody{
  height: 94%;
  display: flex;
  margin-top:10px;
  justify-content: center;
}
.left {
  background-color: transparent;
}
.right {
  width: 58%;
  height: 98%;
  overflow: auto;
  background-color: rgb(238, 241, 246);
}
.preview {
  color: rgb(75, 75, 233);
  background-color: white;
  width: 100px;
  font-weight: bolder;
  line-height: 30px;
}
.random {
  line-height: 30px;
  margin-left: 13%;
}
.hide {
  line-height: 30px;
  margin-left: 20px;
  margin-right: auto;
}
.random:hover,
.hide:hover {
  background-color: rgb(209, 205, 205);
  color: rgb(64, 138, 199);
  font-size: 16px;
}
.finishEdit {
  background-color: rgb(64, 138, 199);
  width: 110px;
  font-weight: bold;
  line-height: 30px;
  margin-right: 13%;
}

.title{
  width: 100%;
  background-color: #fff;
  height: 65px;
  text-align: center;
  padding-top:15px;
}
</style>

